<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>法狮龙家居预警数据大屏</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1971523_j01vigdin0o.css">
</head>

<body>
    <div class="viewport">
        <div class="header">
            <h1>法狮龙家居预警数据大屏</h1>
            <div class="date" id="date"><img src="images/clock.png" alt="" class="clock"><span id="year"></span></div>
        </div>
        <div class="main">
            <div class="column" style="flex: 1;display: flex;flex-direction: column;">
                <div style="display: flex; flex-grow: 11; flex-direction: column;">
                    <!--300配比分析-->
                    <div class="monitor panel" style="flex: 1;  height: auto;">
                        <div class="inner">
                            <div class="tabs">
                                <a href="javascript:;" data-index="0" class="active">300配比分析</a>
                            </div>
                            <div class="content" style="display: block;">
                                <div class="head" style="padding: 0.1rem 1.5rem;">
                                    <span class="col" style="margin-top: 10px;">门店名称</span>
                                    <span class="col" style="margin-top: 10px;">进货数(片)</span>
                                    <span class="col" style="text-align: center;">龙骨<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                    <span class="col" style="text-align: center;">LED灯<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                    <span class="col" style="text-align: center;">取暖器<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                </div>
                                <div class="marquee-view">
                                    <div class="marquee">

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--318配比分析-->
                    <div class="monitor panel" style="flex: 1;  height: auto;">
                        <div class="inner">
                            <div class="tabs">
                                <a href="javascript:;" data-index="0" class="active">318配比分析</a>
                            </div>
                            <div class="content" style="display: block;">
                                <div class="head" style="padding: 0.1rem 1.5rem;">
                                    <span class="col" style="margin-top: 10px;">门店名称</span>
                                    <span class="col" style="margin-top: 10px;">进货数(片)</span>
                                    <span class="col" style="text-align: center;">龙骨<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                    <span class="col" style="text-align: center;">LED灯<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                    <span class="col" style="text-align: center;">取暖器<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                </div>
                                <div class="marquee-view">
                                    <div class="marquee2">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--德尚 悦尚配比分析 滚动-->
                    <!-- <div class="monitor panel" style="flex: 1;  height: auto;">
                        <div class="inner">
                            <div class="tabs">
                                <a href="javascript:;" data-index="0" class="active">德尚 悦尚配比分析</a>
                            </div>
                            <div class="content" style="display: block;">
                                <div class="head" style="padding: 0.1rem 1.5rem;">
                                    <span class="col " style="margin-top: 10px;">门店名称</span>
                                    <span class="col" style="text-align: center;">德尚<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                    <span class="col" style="text-align: center;">悦尚<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                    <span class="col" style="text-align: center;">晾衣架<br>实际 / 标配
                                        &nbsp;&nbsp;&nbsp;达标率</span>
                                </div>
                                <div class="marquee-view">
                                    <div class="marquee">
                                        <div class="row">
                                            <span class="col">北京店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">上海店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">广州店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">深圳店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">苏州店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>

                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">无锡店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">赣州店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>

                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">南昌店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>

                                            <span class="icon-dot"></span>
                                        </div>
                                        <div class="row">
                                            <span class="col ">武汉店</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>
                                            <span class="col">120/200 &nbsp;&nbsp;60%</span>

                                            <span class="icon-dot"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <!--德尚 悦尚配比分析 跳动-->
                    <div class="monitor panel" style="flex: 1;  height: auto;">
                        <div class="inner">
                            <div class="tabs">
                                <a href="javascript:;" data-index="0" class="active">德尚 悦尚配比分析</a>
                            </div>
                            <div class="content" style="display: block;">
                                <div class="head" style="padding: 0.1rem 1.5rem;">
                                    <span class="col " style="margin-top: 10px;">门店名称</span>
                                    <span class="col" style="text-align: center;">德尚<br>实际 / 目标
                                        &nbsp;&nbsp;&nbsp;完成率</span>
                                    <span class="col" style="text-align: center;">悦尚<br>实际 / 目标
                                        &nbsp;&nbsp;&nbsp;完成率</span>
                                    <span class="col" style="text-align: center;">晾衣架<br>实际 / 目标
                                        &nbsp;&nbsp;&nbsp;完成率</span>
                                </div>
                                <div class="marquee-view">
                                    <div class="marqueet change">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 公司占比 -->
                <!-- <div class="monitor panel" style="flex-grow: 1;max-height: 300px;">
                    <div class="inner">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0" class="active">公司占比</a>
               
                        </div>
                        <div style="display: flex;height: 100%;">
                            <div class="chart"
                                style="width: 50%;height: 100%;position: relative;display: flex; justify-content: center;">
                                <div class="pie" style="width: 100%;height: 100%;"></div>
                                <p style="color: #FFFFFF; position: absolute;bottom: -10px;">公司年度占比</p>
                            </div>
                            <div class="chart"
                                style="width: 50%;height: 100%;position: relative;display: flex; justify-content: center;">
                                <div class="pie2" style="width: 100%;height: 100%;"></div>
                                <p style="color: #FFFFFF;position: absolute;bottom: -10px;">公司季度度占比</p>
                            </div>

                        </div>
                    </div>
                </div> -->
            </div>
            <!-- <div class="column" style="flex: .3;">
         
                <div class="monitor panel" style="flex: 1;">
                    <div class="inner">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0" class="active">区域占比数</a>
                         
                        </div>
                        <div class="content" style="display: block;">
                            <div class="head">
                                <span class="col col2">地区</span>
                                <span class="col col2">区域月度占比</span>
                                <span class="col col2">区域年度占比</span>
                            </div>
                            <div class="marquee-view">
                                <div class="marquee">
                                    <div class="row">
                                        <span class="col col2">北京店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">南京店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">上海店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">苏州店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">邯郸店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">赣州店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">南昌店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">九江店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col col2">无锡店</span>
                                        <span class="col col2">60%</span>
                                        <span class="col col2">30%</span>

                                        <span class="icon-dot"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                      
                    </div>
                </div>
            </div> -->
        </div>

    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js"></script>
<script src="./js/index.js"></script>
<!-- <script src="./js/china.js"></script> -->
<!-- <script src="./js/mymap.js"></script> -->

</html>